<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<!-- 		uniapp使用uni-simple-router插件，导致H5端uni.navigateBack()方法报错
		https://blog.csdn.net/weixin_45941290/article/details/109213715 -->
		<u-navbar title-color="#fff" :background="{background:'#4fc08d'}" title="我的微信群">
			<view class="navbar-right" slot="right">
				<u-icon name="edit-pen" size="20"></u-icon>
				<view @click="navTo('./qunCard-add')">发布</view>
			</view>
		</u-navbar>
		<view class="wrap">
			<!-- 切换卡 -->
			<view class="u-tabs-box">
				<!-- is-scroll(默认为true)，配置tabsSwiper组件的内容是否可以左右拖动,一般4个标签以下时，无需拖动，设置为false，
		    5个标签以上，建议可以左右拖动-->
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="swiperItemList" :current="current"
					@change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(swiperItem, swiperIndex) in swiperItemList"
					:key="swiperItem.id">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore"
						lower-threshold="10upx">
						<view class="page-box">
							<view class="order" v-for="(item, index) in swiperItem.itemList" :key="item.id">
								<view class="item">
									<view class="left">
										<image :src="item.wxUrl.substr(0, 4) === 'http'? item.wxUrl:(baseUrl+item.wxUrl)" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="box">
											<view class="test">
												<view class="title u-line-2">{{ item.name }}</view>
												<view class="number">
													<u-icon name="../../static/images/group.png" :size="28"
														color="rgb(94,94,94)">
													</u-icon>&nbsp;&nbsp;
													{{ item.curNum }}人&nbsp; | &nbsp;{{ getTime(item.createTime) }}
												</view>
											</view>
											<view class="right">
												<u-button v-if="item.topTime" class="top" type="info" @click="topHandle(item.id)" disabled>已置顶
												</u-button>

												<u-button v-else class="top" type="success" @click="topHandle(item.id)">置顶
												</u-button>

												<u-button class="top" type="warning" @click="deleteHandle(item.id)">删除
												</u-button>
											</view>
										</view>
									</view>
								</view>
							</view>
							<u-loadmore v-if="swiperItem.itemList.length>9"
								:status="getCurSwiperItem(swiperItem.id).loadStatus" bgColor="#f2f2f2">
							</u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env'

	export default {
		data() {
			return {
				baseUrl: API_URL,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				swiperItemList: [{
						id: 0,
						type: 0,
						name: '个人群', //标题
						loadStatus: 'loadmore', //加载状态
						curPage: 0, //当前页码
						itemList: []
					},
					{
						id: 1,
						type: 1,
						name: '企业群',
						loadStatus: 'loadmore',
						curPage: 0,
						itemList: []
					},
				],

			}
		},
		onShow() {
			if (this.getCurSwiperItem().itemList.length == 0) {
				this.loadMore()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			/**
			 * 置顶
			 * @param {Object}
			 */
			topHandle(id) {
				this.$api.api('qunQrcode.top', {
						"id": id
					})
					.then(res => {
						if (res.code == 200) {
							this.refresh()
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '置顶成功'
							});
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.getCurSwiperItem().itemList = []
				this.getCurSwiperItem().curPage = 0
				this.getCurSwiperItem().loadStatus = 'loadmore'
				this.loadMore()

			},
			/**
			 * 获取几天前
			 */
			getTime(dateStr) {
				return this.$tools.getTimeInterval(new Date(dateStr).getTime(), new Date().getTime())
			},
			/**
			 * 获取当前活跃选项卡数据
			 * @param {Object} current
			 */
			getCurSwiperItem(current) {
				if (current) {
					return this.swiperItemList[current];
				}
				return this.swiperItemList[this.current];
			},
			/**
			 * 加载更多
			 */
			loadMore() {
				if (this.getCurSwiperItem().loadStatus == 'nomore') {
					return
				}
				//加载中
				this.getCurSwiperItem().loadStatus = 'loading';
				let page = this.getCurSwiperItem().curPage + 1
				this.$api.api('qunQrcode.myList', {
						"type": this.getCurSwiperItem().type,
						"pageNum": page,
						"pageSize": 10,
						"orderByColumn": "createTime",
						"isAsc": "descending"
					})
					.then(res => {
						if (res.code == 200) {
							this.swiperItemList[this.current].itemList = this.swiperItemList[this.current].itemList
								.concat(res.rows)
							if (res.total > this.swiperItemList[this.current].itemList.length) {
								this.getCurSwiperItem().loadStatus = 'loadmore';
								this.getCurSwiperItem().curPage++;
							} else {
								this.getCurSwiperItem().loadStatus = 'nomore';
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					})
			},
			//删除
			deleteHandle(id) {
				this.$api.apiPath('qunQrcode.delete', "/" + id)
					.then(res => {
						console.log("进入信息", res)
						if (res.code == 200) {
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * tabs通知swiper切换
			 * tab栏切换
			 * @param {Object} index
			 */
			change(index) {
				this.swiperCurrent = index;
			},
			/**
			 * swiper-item左右移动，通知tabs的滑块跟随移动
			 * @param {Object} e
			 */
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			/**
			 * 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			 * swiper滑动结束，分别设置tabs和swiper的状态
			 * @param {Object} e
			 */
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				if (this.swiperItemList[this.current].itemList.length == 0) {
					this.loadMore()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.navbar-right {
		margin-right: 50rpx;
		color: #FFFFFF;
		display: flex;
	}

	// 没有该配置，无法触发加载更多
	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.order {
		width: 710rpx; //宽度
		background-color: #ffffff;
		margin: 20rpx auto; //上下间距
		border-radius: 20rpx; //倒角
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 2upx 2upx rgba(183, 183, 183, 0.3); //周边阴影

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				width: 90%;

				.box {
					display: flex;

					.test {
						width: 60%;

						.title {
							font-size: 28rpx;
							line-height: 50rpx;
						}

						.number {
							margin: 10rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;
						}
					}

					.right {
						width: 40%;
						margin-left: 10rpx;
						padding-top: 20rpx;
						text-align: right;
						display: flex;

						.top {
							width: 100rpx;
							height: 50rpx;
						}
					}
				}

			}
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
		touch-action: none;
	}

	.swiper-item {
		height: 100%;
		touch-action: none;
	}
</style>
